<template>
  <input type="text" v-model="str" />
  <div ref="div">{{ str }}</div>
  <button @click="change">change</button>
</template>
<script setup lang="ts">
// netxTick(): (function||null)=>Promise 
// 参数为一函数或为空，返回值为一期约
// 将参数函数作为期约的回调函数，注册到微队列中
// 即当页面的响应式数据更新为异步任务，利用 ref 获取的元素直接使用同步任务访问的更新前的数据
// 此时可以采用等待 nextTick() 将同步任务注册为微任务队列的回调，可以在页面更新后再执行该回调
// 此时效果等同于调用 unupdated 声明周期函数

const str = ref<string>('111')
const div = ref<HTMLDivElement>()

const change = async () => {
  str.value += '='
  await nextTick()
  console.log(div.value?.innerHTML)
}
onUpdated(()=>{
  console.log(div.value?.innerHTML)
})

// 0 1 2 3 4
// 因为 i 定义在块作用域内，console.log 在宏任务队列中注册时，需访问其他作用域内的值
// 形成了 console.log 对其他作用域内值的引用，即闭包，故维护其值
for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
}

// 5 5 5 5 5
// 因为 i 定义在函数作用域，此处为全局作用域，console.log 在微任务队列中注册时，访问全局 i 值
// 由于访问 i 值被同步任务迭代为 5 此时注册的 5 个宏任务 console.log 均打印全局的 i 值
for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
}
</script>
<style scoped lang="less"></style>
